<!-- src/components/StudentRegister.vue -->
<template>
  <div class="register-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h1>学生注册</h1>
        </div>
      </template>
      <el-form @submit.prevent="register" :model="form" label-width="120px" ref="registerForm">
        <el-form-item label="用户名" prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
          <el-input v-model="form.userName" required></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
          <el-input v-model="form.name" required></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" :rules="[{ required: true, message: '请选择性别', trigger: 'change' }]">
          <el-select v-model="form.sex" placeholder="请选择性别" required>
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="gradeId" :rules="[{ required: true, message: '请选择班级', trigger: 'change' }]">
          <el-select v-model="form.gradeId" placeholder="请选择班级" required>
            <el-option v-for="classItem in classList" :key="classItem.pkGid" :label="classItem.gradeName" :value="classItem.pkGid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家庭地址" prop="address" :rules="[{ required: true, message: '请输入家庭地址', trigger: 'blur' }]">
          <el-input v-model="form.address" required></el-input>
        </el-form-item>
     
        <el-form-item label="入学日期" prop="enrollYear" :rules="[{ required: true, message: '请选择入学日期', trigger: 'change' }]">
  <el-date-picker
    v-model="form.enrollYear"
    type="datetime"
    placeholder="选择入学日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    required
  ></el-date-picker>
</el-form-item>

        <el-form-item label="电话" prop="phone" :rules="[{ required: true, message: '请输入电话', trigger: 'blur' }]">
          <el-input v-model="form.phone" required></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人" prop="emergencyContact" :rules="[{ required: true, message: '请输入紧急联系人', trigger: 'blur' }]">
          <el-input v-model="form.emergencyContact" required></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人电话" prop="emergencyContactPhone" :rules="[{ required: true, message: '请输入紧急联系人电话', trigger: 'blur' }]">
          <el-input v-model="form.emergencyContactPhone" required></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input type="password" v-model="form.password" required></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit" @click="register">提交</el-button>
          <el-button type="default" @click="resetForm">重置</el-button>
          <el-button type="default" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
       
        userName: '',
        name: '',
        sex: '',
        gradeId: '',
        address: '',
        enrollYear: '',
        phone: '',
        emergencyContact: '',
        emergencyContactPhone: '',
        password: ''

      },
      classList: [] // 用于存储班级列表
    };
  },
  methods: {

    async fetchClassList() {
     axios.get("/api/grade/all").then(response => {
      this.classList = response.data
     }).catch(err => {
      console.log(err)
     })
    },


    register() {
      this.$refs.registerForm.validate((valid) => {
       
        if (valid) {
          
             // 这里可以添加学生注册逻辑
          console.log('学生注册:', this.form);
          axios.post("/api/student/regist",this.form).then(response => {
            //注册成功之后跳转到登录页面
            this.$router.push({path:"/"})
            
          }).catch(err => {
            console.log(err)
            //console.log(err.response)
            console.log(err.response.data.message)
            this.$message.error(err.response.data.message)
          })

        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.registerForm.resetFields();
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  created() {
    this.fetchClassList(); // 在组件创建时获取班级列表
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box-card {
  width: 500px;
}

.card-header {
  text-align: center;
}
</style>
